<template>
<view class="top_nav" :style="{background:bgColor}">
	<view class="status_bar" :style="'height: '+ statusBarHeight"></view>
	<view class="toBar" :style="'height:'+toBarHeight">
		<view>
			<block v-if="showLeft == true">
				<slot>
					<u-icon name="arrow-left" @tap="toback" class="left_img" color="#ffffff"></u-icon>
					<text class="iconfont icon-fanhui left_icon" @tap="toback" v-if="leftBg == false" style="color: #202020;"></text>
				</slot> 
			</block>
		</view>
	 
		<!-- #ifndef H5 -->
		<text class="title" :style="'color:' + textcolor" v-if="showTitle == true">{{navTitle}}</text>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<text class="title bolds" :style="'color:' + textcolor" v-if="showTitle == true">{{navTitle}}</text>
		<!-- #endif -->
	</view>
</view>
</template>

<script>

export default {
	
  data() {
    return {
      
    };
  },
	computed:{
		statusBarHeight(){
			return '0px'
		},
		toBarHeight(){
			return  '0px'
		}
	},
  components: {},
  props: {
    textcolor: {
      type: String,
      default: '#fff'
    },
	bgColor:{
		type:String,
		default:''
	},
    showTitle: {
      type: Boolean,
      default: true
    },
    showLeft: {
      type: Boolean,
      default: false
    },
	navTitle: {
	  type: String,
	  default: '登录'
	},
	leftBg:{
		type: Boolean,
		default: true
	}
  },
  methods: {
    toback() {
		let pages = getCurrentPages()
		if(pages.length==1){
			console.log("只有一页");
			uni.switchTab({
				url:"/pages/index/index"
			})
		}else{
			uni.navigateBack({
				delta: 1
			});
		}
    }

  }
};
</script>
<style lang="scss" scoped>
.status_bar{
  width: 100vw;
  overflow: hidden;
  display: block;
}
.toBar{
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
}
.left_icon{
	font-size: 32upx;
	position: absolute;
	left: 20upx;
	font-weight: 500;
	width: 60upx;
	height: 60upx;
	line-height: 60upx;
}
.toBar .title{
  text-align: center;
  color: #fff;
  font-size: 30upx;
  display: block;
  margin: 0 auto;
}
.left_img{
  position: absolute;
  padding: 15rpx;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  display: flex;
  justify-content: center;
}
.bolds{
	font-weight: bold;
}
.top_nav{
		position: fixed; 
		top: 60upx;
		left: 15upx;
		z-index: 80;
	}
</style>